<template>
  <view class="page">
    <view class="welcome">
      <view class="title">欢迎登录</view>
      <view class="sub-title">xxxxxxxxxxxxxxxxxxxxxxx</view>
    </view>

    <div class="login_form">
      <div class="phone_input">
        <div class="left">
          <div class="label">手机号</div>
          <input
            class="input"
            v-model="loginFrom.phone"
            @input="inputHandler"
            placeholder="请输入手机号码"
            placeholder-class="pla"
            type="number"
          />
        </div>
        <div class="send-btn" :class="isCounting ? 'disabled' : ''" @click="handleClick">
          {{ isCounting ? `重新发送(${count}s)` : '发送验证码' }}
        </div>
      </div>

      <div class="code_input">
        <div class="left">
          <div class="label">验证码</div>
          <input
            class="input"
            v-model="loginFrom.code"
            @input="codeInputHandler"
            placeholder="请输入验证码"
            placeholder-class="pla"
            :maxlength="6"
            type="number"
          />
        </div>
      </div>

      <view class="login_btn" @click="loginByCode">一键登录</view>
    </div>
  </view>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import { getSmsByPhone, smsLogin } from '../../apis/pages';
  import { isPhone } from '../../utils/reg';
  import { useUserStore } from '../../store/user';
  import { loginRedirect } from '../../utils/loginHooks';

  const userStore = useUserStore();

  const loginFrom = reactive({
    phone: '',
    code: '',
  });

  const count = ref(60);
  const isCounting = ref(false);
  let timer = null;

  onLoad(() => {
    console.log('onLoad');
  });

  function handleClick() {
    if (isCounting.value) return;

    if (!loginFrom.phone.trim()) {
      uni.showToast({
        title: '请输入手机号',
        icon: 'none',
      });
    } else if (!isPhone(loginFrom.phone)) {
      uni.showToast({
        title: '手机号格式不正确',
        icon: 'none',
      });
    } else {
      // 发送验证码
      sendCode();

      isCounting.value = true;
      count.value = 60;
      timer = setInterval(() => {
        count.value--;
        if (count.value <= 0) {
          clearInterval(timer);
          timer = null;
          isCounting.value = false;
        }
      }, 1000);
    }
  }

  function sendCode() {
    getSmsByPhone({
      phone: loginFrom.phone,
    }).then((res) => {
      uni.showToast({ title: '验证码已发送', icon: 'success' });
    });
  }

  function loginByCode() {
    if (!loginFrom.phone.trim()) {
      uni.showToast({
        title: '请输入手机号',
        icon: 'none',
      });
    } else if (!isPhone(loginFrom.phone)) {
      uni.showToast({
        title: '手机号格式不正确',
        icon: 'none',
      });
    } else if (!loginFrom.code) {
      uni.showToast({
        title: '请输入验证码',
        icon: 'none',
      });
    } else if (loginFrom.code.trim().length != 6) {
      uni.showToast({
        title: '验证码格式有误',
        icon: 'none',
      });
    } else {
      getWechatCode().then((code) => {
        smsLogin({
          phone: loginFrom.phone,
          smsCode: loginFrom.code,
          source: 1, // 用户分类  1商户端 2用户端
          code,
        }).then((res) => {
          console.log(res, '登录 res >>>>>>');
          userStore.setToken(res.token);
          userStore.setUserInfo(res);

          loginRedirect();
        });
      });
    }
  }

  // 获取微信小程序code
  function getWechatCode() {
    return new Promise((resolve, reject) => {
      uni.login({
        provider: 'weixin', // 指定微信登录
        success(res) {
          if (res.code) {
            resolve(res.code); // 返回微信登录 code
          } else {
            reject(new Error('获取微信 code 失败：' + res.errMsg));
          }
        },
        fail(err) {
          reject(new Error('微信登录失败：' + err.errMsg));
        },
      });
    });
  }

  function inputHandler(e) {}
  function codeInputHandler(e) {}
</script>

<style scoped lang="scss">
  .page {
    width: 100vw;
    min-height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    background-color: #ffffff;
  }

  .welcome {
    padding: 60rpx 40rpx;

    .title {
      // font-size: 35rpx;
      font-weight: 600;
      font-size: 30rpx;
      color: #1e2737;
      margin-bottom: 20rpx;
    }

    .sub-title {
      font-weight: 500;
      font-size: 30rpx;
      color: #a2aabc;
    }
  }

  .login_form {
    padding: 0 40rpx;
    font-size: 28rpx;
    .label {
      font-weight: 500;
      font-size: 26rpx;
      color: #1e2737;
      margin-bottom: 10rpx;
    }
  }

  .phone_input {
    display: flex;
    margin-bottom: 20rpx;
    border-bottom: 2rpx solid #eee;
    padding-bottom: 10rpx;

    .left {
      flex: 1;
    }

    .send-btn {
      width: 240rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background-color: #31b432;
      color: #fff;
      border-radius: 8rpx;

      &.disabled {
        background-color: #cccccc;
      }
    }
  }

  .code_input {
    border-bottom: 2rpx solid #eee;
    padding-bottom: 10rpx;
  }

  .login_btn {
    width: 657rpx;
    height: 83rpx;
    line-height: 83rpx;
    background: #31b432;
    font-weight: 600;
    font-size: 30rpx;
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
    margin-top: 30rpx;
    border-radius: 8rpx;
  }
</style>
